<!--  -->
<template>
  <div>
          <!-- background-color="rgb(219,101,3)"
       text-color="white" -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"

      @select="handleSelect"
    >
      <el-menu-item index="page"
        ><i class="el-icon-s-home"></i><span>首页</span></el-menu-item
      >
      <el-menu-item index="news"
        ><i class="el-icon-s-order"></i><span>新闻资讯</span></el-menu-item
      >
      <el-submenu index="selectCollege">
        <template slot="title"
          ><i class="el-icon-s-cooperation"></i
          ><span>报考工具箱</span></template
        >
        <el-menu-item index="college"
          ><i class="el-icon-school"></i><span>院校</span></el-menu-item
        >
        <el-menu-item index="major">
          <i class="el-icon-files"></i><span>专业 </span></el-menu-item
        >
        <el-menu-item index="batchLine"
          ><i class="el-icon-pie-chart"></i><span>批次线 </span></el-menu-item
        >
      </el-submenu>
      <el-menu-item index="applySelect"
        ><i class="el-icon-s-data"></i><span>模拟报考</span></el-menu-item
      >
      <el-menu-item index="collegeSuggest"
        ><i class="el-icon-star-on"></i><span>院校推荐</span></el-menu-item
      >
      <el-menu-item index="about"
        ><i class="el-icon-s-check"></i> <span>关于我们</span></el-menu-item
      >
      <!-- <el-menu-item index="modifyUser">个人信息</el-menu-item> -->
      <el-dropdown class="right-menu" @command="handleCommand">
        <el-avatar :size="40" :src="avatar" />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="modifyUser"
            ><i class="el-icon-s-custom"></i
            ><span>个人信息</span></el-dropdown-item
          >
          <el-dropdown-item command="dropDown"
            ><i class="el-icon-switch-button"></i
            ><span>退出</span></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>
    <div class="line"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 'page'
    }
  },
  computed: {
    avatar() {
      const user = JSON.parse(localStorage.getItem('user'))
      return 'http://127.0.0.1:8080/profile/upload/2023/11/03/1_20231103144312A001.jpg'
    }
  },
  methods: {
    handleCommand(commond) {
      if (commond == 'dropDown') {
        this.dropDown()
      }
      this.$router.push('/index/modifyUser')
    },
    dropDown() {
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      let url = '/index/'
      for (let path of keyPath) {
        url = url + path + '/'
      }
      console.log(url)
      this.$router.push(url)
    }
  }
}
</script>

<style scoped>
.right-menu {
  float: right;
  height: 100%;
  line-height: 50px;
}
</style>
